/**
 *@auther: tang
 *@Date: 2020-12-02
 *Project: demo
 */
import React from "react"
import "./todoList.css"
import { Tooltip} from "antd";
import {observer,inject} from "mobx-react";
import * as Icon from "@ant-design/icons"
@inject("store")
@observer
class TodoList extends React.Component {
    constructor(props) {
        super(props);
        this.state={
            vals:this.props.data
        }
    }
    changeItemState(item){
        console.log(item);
        let {store} = this.props;
        item.isDid?store.TodoData.cancelOne(item):store.TodoData.compOne(item);
        this.props.getData();
    }
    render() {
        return (
            <>
                <ol>
                    {this.props.data?this.props.data.map((item,index)=>{
                        return <li key={item.id} className={item.isDid?"todoItem compItem":"todoItem"} onClick={this.changeItemState.bind(this,item)}>
                            <Tooltip placement="right" title={item.isDid?"点击取消已完成":"点击设置已完成"}>
                                {item.text}------{"创建/修改时间"+item.crDate}
                                {item.isDid?<Icon.CheckOutlined className="iconAfter iconGreen"/>:<Icon.ClockCircleOutlined className="iconAfter iconRed"/>}
                            </Tooltip>
                        </li>
                    }):""}
                </ol>
            </>
        )
    }
}

export {TodoList as default}
